<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="false">
    <view class="home-page">
      <view class="swiper">
        <u-swiper :list="swiperList" keyName="adImg" @change="onChangeSwiper" @click="onClickSwiper" :autoplay="true">
          <template #indicator>
            <view class="indicator" v-if="swiperList.length > 1">
              <view class="indicator__dot" v-for="(item, index) in swiperList" :key="index" :class="[index === current && 'indicator__dot--active']">
              </view>
            </view>
          </template>
        </u-swiper>
      </view>
      <view class="recommended">
        <view class="title">
          <view class="t"><text class="font">热门课程</text></view>
        </view>
        <view class="recommended-item">
          <view class="rItem" @click="courseDetail(item)" v-for="(item,index) in courseList.list" :key="index">
            <view class="images">
              <up-image :show-loading="true" width="332rpx" height="332rpx" :src="item.imgPath"></up-image>
              <view class="time">{{ timeConversion(item.videoDuration) }}</view>
            </view>
            <view class="r-title-info">
              <view class="rtitle u-line-1">{{ item.courseName }}</view>
              <view class="rinfo u-line-2">{{ item.intro }}{{ item.intro  }}{{ item.intro }}{{ item.intro }}{{ item.intro }}{{ item.intro }}{{ item.intro }}{{ item.intro }}{{ item.intro }}{{ item.intro }}</view>
              <view class="icon-vip-play">
                <image src="/static/image/icon-video-play.png" v-if="item.watchFlag" class="play" />
                <image src="/static/image/icon-home-lock.png" v-else class="lock" />
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <template v-slot:footer>
      <b-tabbar :current="0"></b-tabbar>
    </template>
  </bui-page-layout>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { globalStore } from "@/store";
import { onShow } from "@dcloudio/uni-app";
const gStore = globalStore();
var current = ref(0);
var pageLayout = ref(null);
var swiperList = ref([]);
var courseList = ref([]);

const onChangeSwiper = (e) => {
  current.value = e.current;
};
const onClickSwiper = (e) => {
  window.location.href = swiperList.value[e].adUrl;
};
const getBanner = () => {
  uni.$request
    .service({
      url: "/banner/list/index",
      method: "POST",
    })
    .then((res) => {
      swiperList.value = res;
    });
};
const getCourse = () => {
  uni.$request
    .service({
      url: "/course/list",
      method: "POST",
      data: {
        limit: 100,
        page: 1,
      },
    })
    .then((res) => {
      courseList.value = res;
    });
};
const getCourseDetail = (id) => {
  return new Promise((resolve, reject) => {
    uni.$request
      .service({
        url: "/course/detail/" + id,
        method: "POST",
        data: {},
        isToast: true,
      })
      .then((res) => {
        swiperList.value = res;
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
uni.$on("bind_mobile", async () => {
  await gStore.getToken(gStore.openid);
});
const courseDetail = async (item) => {
  try {
    gStore.videoInfo = await getCourseDetail(item.id);
    uni.$u.route({
      url: "pages/video/play",
    });
  } catch (err) {
    if (err.code === 403) {
      pageLayout.value.uModalShow({
        title: "会员专属视频",
        content: "成为会员即可拥有全部视频播放权限，会员终身有效。",
        confirmText: "9.9元开通",
        closeOnClickOverlay: true,
        complete: async () => {
          if (!gStore.token) {
            uni.$u.route({
              url: "pages/setup/bind_mobile",
              params: { form: "index" },
            });
          } else {
            var wepayInfo = await unifiedOrder();
            WeixinJSBridge.invoke(
              "getBrandWCPayRequest",
              {
                appId: wepayInfo.appid,
                timeStamp: wepayInfo.timestamp,
                nonceStr: wepayInfo.nonceStr,
                package: "prepay_id=" + wepayInfo.prepay_id,
                signType: "MD5",
                paySign: wepayInfo.sign,
              },
              function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  pageLayout.value.uModalClose();
                  getCourse();
                  gStore.getUserInfo();
                }
              }
            );
          }
        },
      });
    }
  }
};
// 统一下单 /m/wx/unifiedOrder
const unifiedOrder = () => {
  return new Promise((resolve, reject) => {
    uni.$request
      .service({
        url: "/m/wx/unifiedOrder",
        method: "POST",
        data: {},
        isToast: true,
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
const timeConversion = (times) => {
  var result = "";
  if (times > 0) {
    var hour = Math.floor(times / 3600); // 时
    var minute = Math.floor((times % 3600) / 60); // 分
    var second = Math.floor((times - 60 * minute) % 60); // 秒
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    result = hour > 0 ? `${hour}:${minute}:${second}` : `${minute}:${second}`;
    return result;
  }
};
onShow(async () => {
  getBanner();
  getCourse();
});
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.home-page {
  padding: 28rpx 28rpx 30rpx;
}

.swiper {
  border-radius: 32rpx;
  overflow: hidden;
}
.recommended {
  .title {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 40rpx;
    &::before {
      content: "";
      display: block;
      background-color: #dedede;
      height: 2rpx;
      position: absolute;
      left: 0;
      right: 0;
      top: 30rpx;
    }
    .t {
      display: flex;
      position: relative;
      padding: 0 4rpx 20rpx;
      background-color: #f6f6f8;
      .font {
        font-size: 34rpx;
        font-weight: 700;
        padding: 0 8rpx 0 14rpx;
      }
      &::before,
      &::after {
        content: "";
        display: block;
        width: 50rpx;
        height: 50rpx;

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
      &::before {
        background-image: url("/static/image/icon-home-title-before.png");
      }
      &::after {
        background-image: url("/static/image/icon-home-title-after.png");
      }
    }
  }
  .recommended-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .rItem {
      width: 48%;
      border-radius: 12rpx;
      margin-top: 28rpx;
      position: relative;
      .images {
        position: relative;
        // width: 366rpx;
        // height: 366rpx;
        border-radius: 16rpx 16rpx 0 0;
        overflow: hidden;
        .time {
          border-radius: 4rpx;
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          padding: 2rpx 10rpx;
          font-size: 24rpx;
          position: absolute;
          bottom: 8rpx;
          right: 8rpx;
        }
      }
      .r-title-info {
        background-color: #fff;
        padding: 18rpx;
        border-radius: 0 0 12rpx 12rpx;
      }
      .rtitle {
        font-size: 30rpx;
        font-weight: 500;
        color: #232f3f;
      }
      .rinfo {
        font-size: 24rpx;
        font-weight: 400;
        line-height: 40rpx;
        color: #7e8295;
      }
      .icon-vip-play {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 330rpx;
        border-radius: 16rpx;
        display: flex;
        // align-items: center;
        justify-content: space-evenly;
        .play,
        .lock {
          width: 68rpx;
          height: 68rpx;
          margin-top: 140rpx;
        }
      }
      .bg {
        // background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}
.indicator {
  @include flex(row);
  justify-content: center;
  &__dot {
    height: 12rpx;
    width: 12rpx;
    border-radius: 12rpx;
    background-color: rgba(255, 255, 255, 1);
    margin: 0 5rpx;
    transition: all 0.3s;

    &--active {
      background-color: #fff;
      width: 32rpx;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}
</style>
